<template>
    <div class="image-viewer">
        <div class="images">
            <div v-for="(item,index) in images" :key="index" class="item">
                <!-- <img :src="item.url" :alt="item.url" /> -->
                <el-image
                    style="width: 150px; height: 150px; margin: 0 10px 6px 0"
                    :src="item.url"
                    :preview-src-list="images.map(el => el.url)"
                >
                </el-image>
                <span>{{ '图片'+(index+1) }}</span>
            </div>
        </div>
        <div v-if="imageDescription" class="descs">
            <div v-for="(item,index) in images" :key="index" class="item-desc">
                <div>{{ '图片'+(index+1) + '说明：' + (item.picDesc ? item.picDesc : '--') }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ImageViewer',
    props: {
        images: {
            type: Array,
            default: () => []
        },
        imageDescription: {
            // 是否需要图片说明
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
        }
    },
    created() {},
    methods: {}
}
</script>

<style lang="scss" scoped>
.image-viewer {
    width: 100%;
    font-size: 14px;
    .images {
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
        }
        img {
            width: 150px;
            height: 150px;
            display: block;
            margin: 0 10px 10px 0;
        }
    }
    .descs {
        .item-desc:not(:last-child) {
            margin-bottom: 10px;
        }
    }
}
</style>
